<template>
  <el-dialog
    :title="$t('INTELLIGENT_CONNECT')"
    :visible="dialogVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="auto">
      <el-form-item :label="$t('SERVICE_NAME')" prop="bizName">
        <el-input v-model.trim="form.bizName" maxlength="50" />
      </el-form-item>
      <el-form-item :label="$t('SERVICE_CODE')">
        <el-input v-model="form.resourceCode" maxlength="32" />
      </el-form-item>
      <!-- 业务等级 -->
      <el-form-item :label="$t('BIZ_LEVEL')" required>
        <el-select v-model="form.bizLevel">
          <el-option
            v-for="item in dictList.BIZ_LEVEL"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('CANCEL') }}</el-button>
      <el-button type="primary" @click="submit('ruleForm')">{{
        $t('YES')
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import bizOpenApi from '@/api/oen/BizOpenApi'

  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: {
          bizName: '',
          resourceCode: '',
          bizLevel: 'GENERAL'
        },
        rules: {
          bizName: [
            {
              required: true,
              message: this.$t('PLEASE_INPUT') + this.$t('SERVICE_NAME'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['dictList'])
    },
    methods: {
      // 验证业务名称重复
      checkBizName() {
        let portIds = [this.$parent.formData.aPortData.portId, this.$parent.formData.zPortData.portId]
        if (this.$parent.formData.aPortData2) {
          portIds = [
            ...portIds,
            this.$parent.formData.aPortData2.portId,
            this.$parent.formData.zPortData2.portId
          ]
        }
        bizOpenApi
          .firstVerify({
            bizName: this.form.bizName,
            portId: portIds
          }).then(res => {
            this.$emit('bizOpen', this.form)
          })
      },
      cancel() {
        this.$refs['ruleForm'].resetFields()
        this.$emit('update:dialogVisible', false)
      },
      submit() {
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            this.checkBizName()
          } else {
            return false
          }
        })
      },
      close() {
        this.cancel()
      }
    }
  }
</script>
